<!-- 已完成和删除键 -->
<template>
  <div class="list">
    <ul class="list1">
      <h2>代办事项列表</h2>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="setCurrentTodo(todo)" class="ano">完成</button>
        <button @click="removeTodo(index)" class="opp">删除</button>
      </li>
    </ul>
    <ul class="list2">
      <button @click="over(index)">清空已完成</button>
      <h2>已完成内容：</h2>
      <li v-for="(comitem, index) in comitems" :key="index">
        {{ comitem }}
      </li>
    </ul>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, computed } from "vue";

// 声明方法
const props = defineProps({
  todos: {
    type: Array,
    required: true,
  },
  comitems: {
    type: Array,
    required: true,
  },
});
const todos = computed(() => {
  return props.todos;
});
const comitems = computed(() => {
  return props.comitems;
});

// 声明事件
const emit = defineEmits(["removeTodo", "setCurrentTodo", "over"]);

const removeTodo = (index) => {
  emit("removeTodo", index);
};
const setCurrentTodo = (todo) => {
  emit("setCurrentTodo", todo);
};

const comitem = (index) => {
  emit("compentodo", { ...props.todos, completed: !props.todos.completed });
};

// 监听localStorage,触发over事件
const over = () => {
  emit("over");
};
</script>

<style>
.opp {
  color: #51c7ae;
  font-size: large;
}

.list {
  display: flex;
  position: fixed;
  justify-content: space-between;
  top: 60px;
  left: 0;
}

.list1 {
  padding-top: 40px;
  padding-bottom: 10px;
  font-size: large;

  h2 {
    font-size: 20px;
  }
}

.list2 {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: large;

  h2 {
    font-size: 20px;
  }
}

.ano {
  color: #51c7;
  font-size: large;
}
</style>
